Dokument: querySelector() Methode

selectors

Ein String, der einen oder mehrere Selektoren enthält, die übereinstimmen sollen. Dieser String muss ein gültiger CSS-Selektor-String sein; ist er es nicht, wird eine SyntaxError-Ausnahme ausgelöst.

Beachten Sie, dass die HTML-Spezifikation nicht erfordert, dass Attributwerte gültige CSS-Bezeichner sind. Wenn ein class- oder id-Attributwert kein gültiger CSS-Bezeichner ist, dann müssen Sie ihn vor der Verwendung in einem Selektor maskieren, entweder indem Sie CSS.escape() auf den Wert anwenden oder eine der in Zeichen maskieren beschriebenen Techniken verwenden. Siehe Attributwerte maskieren für ein Beispiel.

Ein Element-Objekt, das das erste Element im Dokument repräsentiert, das dem angegebenen Satz von CSS-Selektoren entspricht, oder es wird null zurückgegeben, wenn keine Übereinstimmungen vorhanden sind.

Wenn Sie eine Liste aller Elemente benötigen, die den angegebenen Selektoren entsprechen, sollten Sie stattdessen querySelectorAll() verwenden.

SyntaxError DOMException

Wird ausgelöst, wenn die Syntax der angegebenen Selectors ungültig ist.

In diesem Beispiel wird das erste Element im Dokument mit der Klasse myclass zurückgegeben:

const el = document.querySelector(".myclass");

Selektoren können auch sehr leistungsfähig sein, wie im folgenden Beispiel gezeigt wird. Hier wird das erste <input>-Element mit dem Namen "login" (<input name="login"/>) innerhalb eines <div>-Elements mit der Klasse "user-panel main" (<div class="user-panel main">) im Dokument zurückgegeben:

const el = document.querySelector("div.user-panel.main input[name='login']");

Da alle CSS-Selektor-Strings gültig sind, können Sie auch Selektoren negieren:

const el = document.querySelector(
  "div.user-panel:not(.main) input[name='login']",
);

Dies wird ein input-Element mit einem übergeordneten div mit der Klasse user-panel, aber nicht der main-Klasse auswählen.

Dieses Beispiel zeigt, dass, wenn ein HTML-Dokument eine id enthält, die kein gültiger CSS-Bezeichner ist, wir den Attributwert vor der Verwendung in querySelector() maskieren müssen.

HTML

Im folgenden Code hat ein <div>-Element eine id von "this?element", die kein gültiger CSS-Bezeichner ist, da das Zeichen "?" in CSS-Bezeichnern nicht erlaubt ist.

Wir haben auch drei Schaltflächen und ein <pre>-Element für das Fehlerprotokoll.

<div id="this?element"></div>

<button id="no-escape">No escape</button>
<button id="css-escape">CSS.escape()</button>
<button id="manual-escape">Manual escape</button>

<pre id="log"></pre>

CSS

div {
  background-color: blue;
  margin: 1rem 0;
  height: 100px;
  width: 200px;
}

JavaScript

Alle drei Schaltflächen versuchen beim Klicken, das <div> auszuwählen und dann seine Hintergrundfarbe auf einen zufälligen Wert zu setzen.

• Die erste Schaltfläche verwendet den "this?element"-Wert direkt.
• Die zweite Schaltfläche maskiert den Wert mit CSS.escape().
• Die dritte Schaltfläche maskiert explizit das "?"-Zeichen mit einem Backslash. Beachten Sie, dass wir den Backslash selbst auch mit einem weiteren Backslash maskieren müssen, wie: "\\?".

const log = document.querySelector("#log");

function random(number) {
  return Math.floor(Math.random() * number);
}

function setBackgroundColor(id) {
  log.textContent = "";

  try {
    const element = document.querySelector(`#${id}`);
    const randomColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;
    element.style.backgroundColor = randomColor;
  } catch (e) {
    log.textContent = e;
  }
}

document.querySelector("#no-escape").addEventListener("click", () => {
  setBackgroundColor("this?element");
});

document.querySelector("#css-escape").addEventListener("click", () => {
  setBackgroundColor(CSS.escape("this?element"));
});

document.querySelector("#manual-escape").addEventListener("click", () => {
  setBackgroundColor("this\\?element");
});

Ergebnis

Das Klicken auf die erste Schaltfläche führt zu einem Fehler, während die zweite und dritte Schaltfläche ordnungsgemäß funktionieren.

• DOM-Elemente mit Selektoren finden
• Element.querySelector()
• Document.querySelectorAll()
• Element.querySelectorAll()